<!--
 * @Description: 历史数据
 * @Author: charles
 * @Date: 2021-12-14 22:07:24
 * @LastEditors: charles
 * @LastEditTime: 2021-12-14 22:09:35
-->
<template>
  <div>
    <div class="left">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText">
           </el-input>
      </div>
    <el-row>
      <el-col :span="6" style="padding-right:.5em;border-right:2px solid #f4f4f4">
        <el-tree :data="eds" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="18">
        <div v-if="params.device_id">
          <el-form inline size="large" :model="params">
         <el-date-picker v-model="value2" type="datetimerange" 
          :picker-options="pickerOptions"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
           align="right">
         </el-date-picker>
            <el-form-item>
             <el-button type="primary" icon="el-icon-search" size='small'>搜索</el-button>
            </el-form-item>
          </el-form>
          <br/>
          <el-table :data="historyData" size="small">
            <el-table-column label="日期" width="140" align="center">
              <template v-slot="scope">
                {{ scope.row.insert_time | datefmt}}
              </template>
            </el-table-column>
            <el-table-column label="tsp" prop="tsp" width="60" align="center"></el-table-column>
            <el-table-column label="pm10" prop="pm10" width="60" align="center"></el-table-column>
            <el-table-column label="pm2.5" prop="pm25" width="100" align="center"></el-table-column>
            <el-table-column label="温度" prop="temperature" width="60" align="center"></el-table-column>
            <el-table-column label="湿度" prop="humidity"  width="60" align="center"></el-table-column>
            <el-table-column label="噪音" prop="noise" align="center"></el-table-column>
            <el-table-column label="风速" prop="wind_speed" align="center"></el-table-column>
            <el-table-column label="风向" prop="wind_direction" align="center"></el-table-column>
          </el-table> 
        </div>
        <div v-else style="line-height:3em;color:red;text-align:center">请选择设备进行查看</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {get} from '@/utils/request';
import moment from "moment";
export default {
  // 变量
  data(){
    return {
      defaultProps:{
        children: 'children',
        label: 'name'
      },
      eds:[],
      params:{
        page:1,
        pageSize:10
      },
      tableData:[],
      historyData:[],
    }
  },
  // 方法
  methods:{
    // 监测
    loadHistoryData(){
      let url = "/monitor/pageQuery";
      get(url,this.params).then(resp => {
        this.historyData = resp.data.list;
      })
    },
    handleNodeClick(node){
      if(node.engineer_id ){
        // 点击了设备
        this.$set(this.params,'engineer_id',node.engineer_id)
        this.$set(this.params,'device_id',node.id)
        
        // 加载该设备上的历史监测数据
        this.loadHistoryData();
      }
    },
    // 加载工程设备树
    loadEngineerDevices(){
      let url = "/engineer/findEngineerDeviceTree"
      get(url).then(resp => {
        this.eds = resp.data;
      })
    }
  },
  // 页面加载完毕后执行
  mounted() {
    this.loadEngineerDevices();
  },
}
</script>
<style scoped>
.left {
  width: 310px;
  height: 100%;
  border-right: 1px solid #ededed;
}
.right {
  flex: 1;
  height: 100%;
  padding-left: 1em;
}
</style>